<template>
  <swiper
    navigation
    :space-between="50"
    :autoplay="swiperOptions.autoplay"
    :pagination="swiperOptions.pagination"
    style="height: 305px; width: 320px"
  >
    <swiper-slide
      v-for="item in tableData"
      :imgs="item.path"
      :key="item.name"
      :style="'background-image: url(' + item.path + ')'"
      @click="to_content(item)"
    >
      <!-- <router-link :to="to_content(item)" class="swiperRouter" ></router-link> -->
      <div class="swiper-title">{{ item.name }}</div>
    </swiper-slide>
  </swiper>
</template>

<script>
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';
  import 'swiper/css/scrollbar';

import SwiperCore, { Autoplay, Navigation, Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";

SwiperCore.use([Autoplay, Navigation, Pagination]);

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOptions: {
        autoplay: {
          delay: 3000,
          pauseOnMouseEnter: true,
          disableOnInteraction: false,
        },
        pagination: {
          clickable: true,
          bulletActiveClass: "active-class",
          bulletClass: "bullet-class",
          totalClass: "total-pagination",
        },
        tableData: [
            {
                path: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656124391&t=9d2e17bd219fba25d82031c5b361c936",
                title: "图片1",
            },
            {
                path: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F113020142315%2F201130142315-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656124391&t=b7df399e8f6bac0f017bc7523285055c",
                title: "图片2",
            },
            {
                path: "https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&step_word=&hs=0&pn=2&spn=0&di=7084067677328637953&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=2564179107%2C1689612712&os=2652735736%2C521729233&simid=2564179107%2C1689612712&adpicid=0&lpn=0&ln=1685&fr=&fmq=1653532389177_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F21061109241GT3-0-lp.jpg%26refer%3Dhttp%3A%2F%2Fimg.jj20.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Dauto%3Fsec%3D1656124459%26t%3Db7f8ee95f32d05634b0e997faf61539a&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B33da_z%26e3Bv54AzdH3FprAzdH3Fnn9nbc_z%26e3Bip4s&gsm=2&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined&dyTabStr=MCwzLDYsMSw0LDIsNSw3LDgsOQ%3D%3D",
                title: "图片3",
            },
            {
                path: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F063021120F9%2F210630120F9-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656124459&t=901b2e4077cccaf04479d5784e7ce792",
                title: "图片4",
            },
        ]
      },
    };
  },
};
</script>

<style>
</style>